<template>
  <div class="usercard">
    <div style="width: 10%; text-align: center">
      <el-avatar
        :size="80"
        :src="props.userInfo.avatar"
        @error="true"
        style="border: 4px #eee solid; border-radius: 50%; margin-top: -15px"
      >
        <span>{{ props.userInfo.username }}</span>
      </el-avatar>
    </div>
    <div style="flex: 1; padding: 10px">
      <div class="item" style="display: flex; justify-content: space-between">
        <div>{{ props.userInfo.nickname }}</div>
        <div v-if="props.rankInfo.isOwn">
          <el-button round :icon="Document" @click="updateMine">编辑资料</el-button>
          <el-button round :icon="Setting">设置</el-button>
          <el-button round :icon="Files" @click="toContentManager">管理博文 </el-button>
        </div>
        <div v-else>
          <el-button round :icon="Plus">关注 </el-button>
        </div>
      </div>
      <div class="item">
        <ul style="text-align: left; padding: 0">
          <li>
            <span class="number">{{ titleUtil.numberTo(props.rankInfo.history) }}</span
            >总访问量
          </li>
          <li>
            <span class="number">{{ titleUtil.numberTo(props.rankInfo.contentCount) }}</span
            >原创
          </li>
          <li>
            <span class="number">{{ titleUtil.numberTo(props.rankInfo.rank) }}</span
            >排名
          </li>
          <li>
            <span class="number">{{ titleUtil.numberTo(props.rankInfo.follows) }}</span
            >粉丝
          </li>
        </ul>
      </div>
      <div class="item">个人简介：{{ props.userInfo.description }}</div>
      <div class="item">归属地：{{ props.rankInfo.address }}</div>
      <div class="item">
        加入CLBlog时间：{{ titleUtil.formatDateToYYYYMMDD(props.userInfo.createTime) }}
      </div>
    </div>
  </div>
  <InformationDia ref="information"></InformationDia>
</template>

<script setup>
import { Document, Setting, Files, Plus } from '@element-plus/icons'
import titleUtil from '@/util/titleUtil'
import { useRouter } from 'vue-router'
import InformationDia from '@/components/client/InformationDia.vue'
import { ref } from 'vue'

const props = defineProps({
  userInfo: {
    type: Object,
    required: true,
    default: () => ({}) // 提供一个安全的默认值
  },
  rankInfo: {
    type: Object,
    required: true,
    default: () => ({}) // 提供一个安全的默认值
  }
})
console.log('props-->', props.userInfo)
const router = useRouter()
const information = ref()

const toContentManager = () => {
  router.push('/contentManager')
}
const updateMine = () => {
  information.value.open(props.userInfo)
}
</script>
<style scoped lang="scss">
.usercard {
  width: 80%;
  margin-left: 10%;
  color: #fff;
  display: flex;
  gap: 20px;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.167);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
  border: 2px rgba(255, 255, 255, 0.4) solid;
  border-bottom: 2px rgba(40, 40, 40, 0.35) solid;
  border-right: 2px rgba(40, 40, 40, 0.35) solid;
}

.item {
  height: 40px;
}
.number {
  font-weight: 600;
  font-size: 17px;
  margin-right: 4px;
}

li {
  float: left;
  list-style-type: none;
  width: 120px;
}

.el-button {
  width: 120px;
}
</style>
